<template>
  <el-container>
    <el-main>
      <el-steps :active="2" align-center>
        <el-step title="选择座位"></el-step>
        <el-step title="2分钟内付款"></el-step>
        <el-step title="影院取票观影"></el-step>
      </el-steps>
      <div class="count-down-wrapper">
        <div class="count-down">
          <p style="margin-bottom: 10px">
            请在
            <span style="color: red; font-size: 26px">
              {{ minute }} </span
            >分
            <span style="color: red; font-size: 26px">
              {{ second }} </span
            >秒内完成支付
          </p>
          <p style="color: #f03d37">
            超时订单会自动取消，如遇支付问题，请致电梓晨客服：17696283612
          </p>
        </div>
      </div>
      <el-alert title="请仔细核对订单信息" type="warning" show-icon> </el-alert>
      <el-table show-header border :data="myOrder">
        <el-table-column align="center" prop="filmName" label="影片">
        </el-table-column>
        <el-table-column align="center" prop="playOpenTime" label="时间">
        </el-table-column>
        <el-table-column align="center" prop="seat" label="座位">
        </el-table-column>
      </el-table>
      <div style="float: right; margin-top: 30px; margin-right: 10px">
        <span style="font-size: 15px">实际支付</span
        ><span class="money">￥{{ orderPrice }}</span>
      </div>
      <el-button type="danger" round @click="pay"> 支付 </el-button>
    </el-main>
  </el-container>
</template>
<script>
let count;
export default {
  data() {
    return {
      img: require("/src/assets/image/hourglass.png"),
      minute: 0,
      second: 60,
      myOrder: [],
      orderPrice: 0,
    };
  },
  created() {
    this.getOrderById();
  },
  beforeRouteLeave(to, from, next) {
    if (from.path === "/order") {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
      // this.$destroy()
    }
    next();
  },
  methods: {
    getPath() {},
    countDown() {
      count = setInterval(async () => {
        this.second -= 1;
        if (this.minute == 0 && this.second == 0) {
          alert("订单超时");
          window.clearInterval(count);
          const { data: res } = await this.$http.put(
            "/common/order/cancelOrder",
            this.myOrder[0]
          );
          if (res.code != 200) {
            return this.$message.error(res.message);
          } else {
            //  this.$router.push('/seat')
            this.$router.push({
              path: "/seat",
              query: {
                filmId: sessionStorage.getItem("filmId"),
                openTime: this.myOrder[0].playOpenTime,
              },
            });
          }
        } else if (this.second == 0) {
          this.minute -= 1;
          this.second = 60;
        }
      }, 1000);
    },
    async getOrderById() {
      debugger
      const { data: res } = await this.$http.get("/common/order/getOrderById", {
        params: { orderId: this.$route.query.id },
      });
      debugger
      console.log("res",res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.orderPrice = res.data.orderPrice;
        if (res.data.orderStatus == 1) {
          this.myOrder.push(res.data);
          console.log("thismyorder",this.myOrder)
        }

        if (this.myOrder.length > 0) {
          this.countDown();
        }
      }
    },
    pay() {
      debugger
      this.$confirm("确认支付?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(this.myOrder)
          this.myOrder[0].orderStatus = 2;
          const { data: res } = await this.$http.put(
            "/common/order/payOrder",
            this.myOrder[0]
          );
          if (res.code != 200) {
            return this.message.$error(res.message);
          } else {
            this.$message({
              type: "success",
              message: "支付成功",
            });
            window.clearInterval(count);
            let data = new URLSearchParams();
            data.append("seat", this.myOrder[0].seat);
            data.append("playId", sessionStorage.getItem("playId"));
            const { data: res } = await this.$http.post(
              "/common/seat/sellSeat",
              data
            );
            if (res.code != 200) {
              return this.message.$error(res.message);
            } else {
              this.$router.push("/myOrder");
            }
          }
        })
        .catch((e) => {
          console.log("e",e)
          this.$message({
            type: "info",
            message: "已取消支付",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.count-down-wrapper {
  width: 85%;
  height: 90px;
  padding-top: 20px;
  margin: 40px auto;
  background-color: #fff3f3;
  .count-down {
    padding-left: 70px;
    margin-left: 30px;
    height: 100%;
    background: url("../assets/image/hourglass.png");
    background-position: 0 15px;
    background-repeat: no-repeat;
    background-size: 4% 50%;
  }
}
.el-alert {
  width: 85%;
  margin: 0 auto;
}
el-table {
  width: 85%;
  margin: 10px auto;
}
.el-button {
  margin-top: 96px;
  float: right;
  width: 163px;
  margin-right: -151px;
}
.money {
  font-size: 36px;
  color: #f03d37;
  margin-left: 5px;
}
</style>